import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  Dropdown
} from 'react-bootstrap';

import "./less/index.css";

import { URL } from '../../config';
import { function_logout } from '../../actions/passport';
import { function_handlelogout } from '../../actions/passport';
import { function_getuserinfo } from '../../actions/member';

import SetUserinfo from '../../containers/member/userinfo';

class App extends Component {

  state = {
    showPersonSetting: false
  }

  setShowPersonSetting (showPersonSetting) {
    this.setState({
      showPersonSetting: showPersonSetting
    });
  }

  handleLogout () {
    const { dispatch } = this.props;
    function_logout(dispatch);
  }

  componentDidMount () {
    const { dispatch } = this.props;
    if (this.props.account.uid === 0) {
      function_handlelogout();
      this.props.history.push(URL.login_page);
    } else {
      function_getuserinfo(dispatch);
    }
  }

  render () {
    return (
      <header className="commonHeader">
        <div className="left">
          <div className="logo">
            <Link to={URL.main_page}>
              <img src={require("../../containers/static/images/logo.gif")} alt="logo" />
            </Link>
          </div>
          <h1 className="organizeName">{this.props.organize.name}</h1>
        </div>
        <div className="right">
          <Dropdown>
            <Dropdown.Toggle variant="Secondary" className="avatar">
              <img src={this.props.account.avatar === null ? require("./images/avatar.jpg") : this.props.account.avatar} alt="用户头像" />
              <span className="nickname">{this.props.account.nickname}</span>
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item onClick={this.setShowPersonSetting.bind(this, true)}>
                <i className="icon">&#xe60f;</i>
                个人中心
              </Dropdown.Item>
              <Dropdown.Item href={URL.login_page} onClick={this.handleLogout.bind(this)}>
                <i className="icon">&#xe602;</i>
                退出登录
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </div>
        <SetUserinfo
          showFlg={this.state.showPersonSetting}
          onHide={this.setShowPersonSetting.bind(this, false)} />
      </header>
    )
  }
}

function mapStateToProps (state) {
  return {
    account: state.account,
    organize: state.organize
  }
}

export default connect(mapStateToProps)(App);